import React from 'react'
// import ReactDOM from 'react-dom'; //reactv17或v16引入ReactDOM的写法
import ReactDOM from 'react-dom/client' //reactv18引入ReactDOM的写法

// 创建函数组件
// 注意:
// 1. 组件名首字母要大写
// 2. 函数组件中必须写return
// 3. return的值是jsx或者是null
function Test() {
  return (
    <div>
      <h1>我是Test组件</h1>
    </div>
  )
}

// 创建类组件
// 1. 组件名首字母大写
// 2. 必须继承React.Component
// 3. 必须写render函数
// 4. render中必须写return,return后面跟着jsx或null
class Demo extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Demo组件</h1>
      </div>
    )
  }
}

const div = (
  <div>
    <hr />
    {/* 不管是类组件,还是函数组件,使用组件的写法一致.写成双标签或单标签都可以  */}

    {/* 注意: 
    1. 使用组件的代码写在哪里,则组件的结构就渲染在哪里

    2. 使用一次组件,就会创建出来一个新的组件实例
    
    */}
    <Test></Test>
    <Test></Test>
    <Test />

    <div>=================</div>
    <Demo></Demo>
    <Demo />

    <hr />
  </div>
)

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(div)
